/* eslint-disable no-console */
// import { useRef } from 'react';
import ProForm, {
  ModalForm, ProFormDateTimePicker,
  // ProFormTextArea,
  // StepsForm,
  ProFormRadio, ProFormSelect,
  ProFormText
} from '@ant-design/pro-form';
import { Badge, Descriptions, Divider, message } from 'antd';
// import { useModel } from 'umi';
// import { FormattedMessage } from 'umi';
import moment from 'moment';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.ProductSub>; // Partial 表示 对象的参数展开

export type SubFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  SubModalVisible: boolean;
  values: Partial<API.ProductSub>;
};

const SubForm: React.FC<SubFormProps> = (props) => {
  // const { initialState } = useModel('@@initialState');
  console.log("props:", props);


  // const con = props.values.product?.status?.controlsw.con ? "开机" : "关机";
  const a = props.values.errstr==="" ? "" : ":";
  let run_mode: string ="关机" ;
  if (props.values.con) {
    switch (props.values.cmode) {
      case 0:
        run_mode = "自动";        
        break;
      case 1:
        run_mode = "制冷";        
        break;
      case 2:
        run_mode = "除湿";        
        break;
      case 3:
        run_mode = "送风";        
        break;
      case 4:
        run_mode = "制热";        
        break;
      default:
        run_mode = "开机";   
        break;
    }
  }
  const status = run_mode + a + props.values.errstr;

  return (
    <>
      {/* ModalForm 组合了 Modal 和 ProForm 可以减少繁琐的状态管理。 */}
      <ModalForm
        //   formref={this.formRef}
        // 标签布局:'horizontal', 'vertical', 'inline'
        layout="inline"
        // width={640}
        title="短信订阅"
        // 是否打开
        visible={props.SubModalVisible}
        // omitNil:ProForm 会自动清空 null 和 undefined 的数数据，如果你约定了 nil 代表某种数据，可以设置为 false 关闭此功能
        omitNil={false}
        // modalProps ：Modal 的 props，使用方式与 antd 相同。注意：不支持 'visible'，请使用全局的 visible
        // 即Modal 的 所有或props放在modalProps
        modalProps={{
          onCancel: () => {
            console.log("cancal props:", props);
            props.onCancel();
          },
          bodyStyle: { padding: '32px 40px 48px' },
          destroyOnClose: true,
          okText: "提交",
          cancelText: "取消",

        }}
        // onFinish 提交数据时触发
        onFinish={async (values) => {
          // console.log("finish props:", props);
          // await waitTime(2000);
          console.log("subform valuse:", values);
          props.onSubmit(values);

          // const val1 = await formRef.current?.validateFields();
          // console.log('validateFields:', val1);
          // const val2 = await formRef.current?.validateFieldsReturnFormatValue?.();
          // console.log('validateFieldsReturnFormatValue:', val2);
          message.success('提交成功');
        }}

      // formRef={formRef}
      // 发起网络请求的参数,与 request 配合使用
      /*         params={{
                userid: initialState?.currentUser?.id,
                phone: initialState?.currentUser?.mobile,
                productid: props.values.product?.id,
              }} */
      // 发起网络请求的参数,返回值会覆盖给 initialValues
      /*         request={async (params) => getsubinfo(params)
                .then(resp => {
                  console.log("subinfo:",resp)
                  return { ...resp.data }
                }
                )} */
      /*         initialValues={{ 
                id: "",
                userid:"",
                productid: "",
                phone: initialState?.currentUser?.mobile,
                errsub: false, //故障订阅
                stutassub: false, //状态订阅
                expiretime: now, //终止时间，到期时间
              }}  */
      // visible 改变时触发
      /*       onVisibleChange={() => {
                      props.onCancel();
                    }}  */
      >
        <Descriptions title="产品信息" size="small" column={2} bordered>
          <Descriptions.Item label="类别">{props.values.devicetype}</Descriptions.Item>
          <Descriptions.Item label="型号">{props.values.devicemodel}</Descriptions.Item>
          <Descriptions.Item label="条码">{props.values.barcode}</Descriptions.Item>
          <Descriptions.Item label="标识">{props.values.deviceimsi}</Descriptions.Item>
{/*           <Descriptions.Item label="在线">
            <Badge status={online === "离线" ? "default" : "processing"} text={online} />
          </Descriptions.Item> */}
          <Descriptions.Item label="更新时间">{moment(props.values.updatetime).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
          <Descriptions.Item label="状态" span={2}>
            <Badge status={props.values.errstr!=="" ? "error" : "processing"} text={status} />
          </Descriptions.Item>
        </Descriptions>
        <Divider />

        <ProForm.Group>
          <ProFormText
            width="sm"
            name="phone"
            disabled
            label="手机号"
            tooltip="登录手机号，不能更改"
            initialValue={props.values.phone}
          />
        </ProForm.Group>

        <ProFormRadio.Group
          name="errsub"
          label="故障订阅"
          tooltip="当故障出现后，发送消息"
          initialValue={props.values.errsub}
          // fieldProps = {{defaultValue : "c"}} //默认参数，当不选时，仍为undefine
          // 注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。 
          // initialValues 只在 form 初始化时生效且只生效一次，如果你需要异步加载推荐使用 request
          // initialValue = false
          options={[
            {
              label: '订阅',
              value: true,
            },
            {
              label: '取消订阅',
              value: false,
            },
          ]}
        />
        <ProFormRadio.Group
          name="stutassub"
          label="状态订阅"
          tooltip="当开关机、压缩机起停状态出现后，发送消息"
          // fieldProps = {{defaultValue : "c"}} //默认参数，当不选时，仍为undefine
          // 注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。 
          // initialValues 只在 form 初始化时生效且只生效一次，如果你需要异步加载推荐使用 request
          initialValue={props.values.stutassub}
          options={[
            {
              label: '订阅',
              value: true,
            },
            {
              label: '取消订阅',
              value: false,
            },
          ]}
        />
        <ProFormSelect
          allowClear={false}
          name="periodtime"
          label="消息间隔"
          options={[
            { label: '15分钟', value: 15 },
            { label: '30分钟', value: 30 },
            { label: '1小时', value: 60 },
            { label: '2小时', value: 120 },
            { label: '4小时', value: 240 },
            { label: '8小时', value: 480 },
          ]}
          tooltip="状态消息的时间间隔，对故障、开停消息不起作用"
          initialValue={props.values.periodtime || 30}
          placeholder="消息间隔"
        />

        <ProFormDateTimePicker
          allowClear={false}
          name="expiretimestr"
          label="终止时间"
          tooltip="发送消息终止时间"
          initialValue={moment(props.values.expiretime)} // 类型为 moment
        // fieldProps={{ defaultValue: moment(now)}} // 初始化值，没有作用，被网络请求覆盖
        />

      </ModalForm>

    </>
  );
};

export default SubForm;
